<div style="margin: 50px auto;width:300px">
  <input type="text" [(ngModel)]= "search" style="width: 200px"><button (click)="add()" style="width: 80px">搜索</button>
  <div *ngFor="let item of searchList;let i = index">
    {{item}}---<button (click)="delete(i)" style="width: 80px">删除</button>
  </div>
</div>

<div style="margin: 50px auto;width:300px">
    <input type="text" [(ngModel)]= "keyword"><button (click)="addItem()">添加</button>
    <h3>未完成</h3>
    <div *ngFor="let item of todoList;let i = index" [hidden] ="item.flag">
      <!-- checkbox的双向数据绑定 -->
      <input type="checkbox" [(ngModel)]= "item.flag" (change)="checkboxChange()"/>---{{item.title}}---<button (click)="deleteItem(i)">删除</button>
    </div>
    <h3>已完成</h3>
    <div *ngFor="let item of todoList;let i = index" [hidden] = "!item.flag">
        <input type="checkbox" [(ngModel)]= "item.flag"/>---{{item.title}}---<button (click)="deleteItem(i)">删除</button>
      </div>
  </div>
  <!-- 使用ViewChild获取子组件的实例 -->
  <app-news #mynews></app-news>
